<template>
  <div id="administrators">
    <div>
      <el-button @click="addshow = true">添加管理员</el-button>
      <el-button @click="searchshow = !searchshow">搜索&nbsp;&nbsp;<i class="iconfont icon-zhankai"  :class="{active: searchshow === true}" style="font-size: 12px"></i></el-button>
    </div>
    <el-collapse-transition>
      <div v-show="searchshow">
        <div class="main-box">
          <span>状态</span>
          <el-radio-group v-model="searchmsg.enabled" @change="changeHandler">
            <el-radio :label="1" text-color="#333">可用</el-radio>
            <el-radio :label="0">不可用</el-radio>
          </el-radio-group>
        </div>
        <div class="main-box">
          <span>用户名</span>
          <el-input
            placeholder="请输入用户名"
            size="mini"
            prefix-icon="el-icon-search"
            v-model="searchmsg.username">
          </el-input>
        </div>
        <div class="main-box">
          <span>手机号</span>
          <el-input
            placeholder="请输入手机号"
            size="mini"
            prefix-icon="el-icon-search"
            v-model="searchmsg.mobile">
          </el-input>
        </div>
        <div class="main-box">
          <span>真实姓名</span>
          <el-input
            placeholder="请输入真是姓名"
            size="mini"
            prefix-icon="el-icon-search"
            v-model="searchmsg.truename">
          </el-input>
        </div>
        <div class="main-box">
          <span>管理组名</span>
          <el-select v-model="checkedgroup" placeholder="请选择" size="mini">
            <el-option
              v-for="item in groupsfind"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <span style="margin-left: 20px"><el-button size="mini" @click="search">确定</el-button></span>
        </div>
      </div>
    </el-collapse-transition>
    <msg-list :tableData="tableData" :title="title" :btntype="btntype" :pagesall="pagesall" :pages="page" @changepage="changepage1" @getid="getid1"></msg-list>
    <div class="layer" v-show="addshow">
      <div class="mask" @click="addshow = false"></div>
      <div class="content">
        <span class="close" @click="addshow = false"><i class="iconfont icon-untitled94"></i></span>
        <p class="title">新增管理员</p>
        <div class="doit">
          <div class="one">
            <span>用户昵称</span><el-input size="mini" v-model="addmsg.username"></el-input>
          </div>
          <div class="one">
            <span>用户密码</span><el-input size="mini" v-model="addmsg.password"></el-input>
          </div>
          <div class="one">
            <span>邮箱地址</span><el-input size="mini" v-model="addmsg.email"></el-input>
          </div>
          <div class="one">
            <span>手机号码</span><el-input size="mini" v-model="addmsg.mobile"></el-input>
          </div>
          <div class="one">
            <span>真实姓名</span><el-input size="mini" v-model="addmsg.truename"></el-input>
          </div>
          <div class="one">
            <span>管理组名</span>
            <el-select v-model="group" placeholder="请选择" size="mini">
              <el-option
                v-for="item in groups"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="buttons">
            <el-button size="mini" @click="addhot">新增</el-button>
            <el-button size="mini" @click="addshow = false">取消</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="layer" v-show="reasonshow">
      <div class="mask" @click="reasonshow = false"></div>
      <div class="content">
        <span class="close" @click="reasonshow = false"><i class="iconfont icon-untitled94"></i></span>
        <p class="title">屏蔽的理由</p>
        <div class="doit">
          <div class="one">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 20}"
              v-model="deletes.reason">
            </el-input>
          </div>
          <div class="buttons">
            <el-button size="mini" @click="deleteanswer">确定</el-button>
            <el-button size="mini" @click="reasonshow = false">取消</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="layer" v-show="groupshow">
      <div class="mask" @click="groupshow = false"></div>
      <div class="content">
        <span class="close" @click="groupshow = false"><i class="iconfont icon-untitled94"></i></span>
        <p class="title">修改分组</p>
        <div class="doit">
          <div class="one">
            <span>原始分组</span>
            <span style="margin-left: 20px;">{{getmsg.group}}</span>
          </div>
          <div class="one">
            <span>更改分组</span>
            <el-select v-model="group" placeholder="请选择" size="mini">
              <el-option
                v-for="item in groups"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="buttons">
            <el-button size="mini" @click="chgroup">确定</el-button>
            <el-button size="mini" @click="groupshow = false">取消</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="layer" v-show="passwordshow">
      <div class="mask" @click="passwordshow = false"></div>
      <div class="content">
        <span class="close" @click="passwordshow = false"><i class="iconfont icon-untitled94"></i></span>
        <p class="title">修改密码</p>
        <div class="doit">
          <div class="one">
            <span>新的密码</span>
            <el-input
              size="mini"
              placeholder="请输入新的密码"
              v-model="newpassword">
            </el-input>
          </div>
          <div class="one">
            <span>确认密码</span>
            <el-input
              size="mini"
              placeholder="请确认密码"
              v-model="truepassword">
            </el-input>
          </div>
          <div class="buttons">
            <el-button size="mini" @click="chpassword">确定</el-button>
            <el-button size="mini" @click="passwordshow = false">取消</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="layer" v-show="msgshow">
      <div class="mask" @click="msgshow = false"></div>
      <div class="content">
        <span class="close" @click="msgshow = false"><i class="iconfont icon-untitled94"></i></span>
        <p class="title">{{getmsg.username}}&nbsp;&nbsp;的详情</p>
        <div class="doit">
          <p>用户名: <span>{{getmsg.username}}</span></p>
          <p>真实姓名: <span>{{getmsg.truename}}</span></p>
          <p>手机号码: <span>{{getmsg.mobile}}</span></p>
          <p>所在组: <span>{{getmsg.group}}</span></p>
          <p>访问次数: <span>{{getmsg.visit_count}}</span></p>
          <p>是否可用: <span>{{getmsg.enabled}}</span></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import msgbox from '@/common/msgbox.js'
import MsgList from '../public/msgList'
import hash from '@/common/hash.js'

export default {
  components: {
    MsgList},
  name: 'administrators',
  data () {
    return {
      page: 1,
      searchmsg: {
        username: '',
        mobile: '',
        truename: '',
        group_id: '',
        enabled: 1
      },
      deletes: {
        reason: ''
      },
      getmsg: {},
      pingbiid: 0,
      btntype: ['屏蔽', '修改分组', '修改密码', '查看详情'],
      pagesall: 0,
      reasonshow: false,
      addshow: false,
      show1: false,
      searchshow: false,
      groupshow: false,
      passwordshow: false,
      msgshow: false,
      newpassword: '',
      truepassword: '',
      groupsfind: [{
        value: 0,
        label: '全部'
      }],
      groups: [],
      group: '',
      checkedgroup: '',
      addmsg: {
        username: '',
        password: '',
        email: '',
        mobile: '',
        truename: '',
        group_id: ''
      },
      title: [
        {
          prop: 'id',
          label: 'id'
        },
        {
          prop: 'username',
          label: '用户名'
        },
        {
          prop: 'truename',
          label: '真实姓名'
        },
        {
          prop: 'mobile',
          label: '手机号码'
        },
        {
          prop: 'group',
          label: '所在组'
        },
        {
          prop: 'visit_count',
          label: '访问次数'
        },
        {
          prop: 'enabled',
          label: '是否可用'
        }
      ],
      tableData: []
    }
  },
  mounted () {
    this.search()
    this.getselect()
  },
  methods: {
    getselect () {
      let that = this
      this.$g.ajax({
        path: 'groups/lists',
        method: 'get',
        cbSuccess: function (data) {
          console.log(data.memo)
          that.changegroup(data.memo)
        },
        cbError: function (data) {
          let msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    changegroup (val) {
      this.groups = []
      this.groupsfind = [{
        value: 0,
        label: '全部'
      }]
      for (let i in val.list) {
        this.groups.push({
          value: val.list[i].id,
          label: val.list[i].alias
        })
        this.groupsfind.push({
          value: val.list[i].id,
          label: val.list[i].alias
        })
      }
    },
    addhot () {
      console.log(this.group)
      let that = this
      /* 用户名 */
      let ndata = [
        {//  验证password
          val: this.addmsg.username,
          rules: {//  规则
            rangeLength: {
              msg: msgbox.get('Username_error'),
              args: [3, 30]
            }
          }
        }
      ]
      let resn = this.$g.verify.check(ndata)
      if (resn !== true) {
        this.$message.error(resn)
        return false
      }
      /* 密码 */
      let pdata = [
        {//  验证password
          val: this.addmsg.password,
          rules: {//  规则
            required: {
              msg: msgbox.get('Password')
            },
            rangeLength: {
              msg: msgbox.get('PasswordError'),
              args: [6, 15]
            }
          }
        }
      ]
      let resp = this.$g.verify.check(pdata)
      if (resp !== true) {
        this.$message.error(resp)
        return false
      }
      /* 邮箱 */
      if (that.addmsg.email !== '') {
        let edata = [
          {//  验证password
            val: this.addmsg.email,
            rules: {//  规则
              email: {
                msg: msgbox.get('EmailError')
              }
            }
          }
        ]
        let rese = this.$g.verify.check(edata)
        if (rese !== true) {
          this.$message.error(rese)
          return false
        }
      }
      /* 手机 */
      let mdata = [
        {//  验证password
          val: this.addmsg.mobile,
          rules: {//  规则
            required: {
              msg: msgbox.get('MobileNull')
            },
            mobile: {
              msg: msgbox.get('MobileError')
            }
          }
        }
      ]
      let resm = this.$g.verify.check(mdata)
      if (resm !== true) {
        this.$message.error(resm)
        return false
      }
      /* 管理员真实姓名 */
      let adata = [
        {//  验证password
          val: this.addmsg.truename,
          rules: {//  规则
            required: {
              msg: msgbox.get('adminTruename')
            }
          }
        }
      ]
      let resa = this.$g.verify.check(adata)
      if (resa !== true) {
        this.$message.error(resa)
        return false
      }
      /* 管理员分组 */
      let gdata = [
        {//  验证password
          val: this.group,
          rules: {//  规则
            number: {
              msg: msgbox.get('numberMuse')
            }
          }
        }
      ]
      let resg = this.$g.verify.check(gdata)
      if (resg !== true) {
        this.$message.error('请选择管理组名')
        return false
      }
      that.addmsg.group_id = that.group
      let msg = that.addmsg
      msg.password = hash.md5hex(that.addmsg.password)
      this.$g.ajax({
        path: 'admins/add',
        method: 'post',
        data: msg,
        cbSuccess: function (data) {
          console.log(data.memo)
          that.addshow = false
          that.$message.success('添加成功')
          that.searchmsg = {
            username: '',
            mobile: '',
            truename: '',
            group_id: '',
            enabled: 1
          }
          that.search()
        },
        cbError: function (data) {
          let msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    search () {
      let that = this
      this.searchmsg.group_id = this.$route.query.id
      if (this.checkedgroup !== '') {
        this.searchmsg.group_id = this.checkedgroup
      }
      this.$g.ajax({
        path: 'admins/index/' + that.page,
        method: 'post',
        data: that.searchmsg,
        cbSuccess: function (data) {
          console.log(data.memo)
          that.tableData = data.memo.list
          that.page = parseInt(data.memo.page)
          that.pagesall = parseInt(data.memo.pageTotal)
        },
        cbError: function (data) {
          let msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    changeHandler (val) {
      console.log(val)
    },
    changepage1 (page) {
      console.log(page)
      this.page = page
      this.search()
    },
    getid1 (val) {
      console.log(val)
      this.getmsg = val.val
      if (val.btn === '屏蔽') {
        this.$confirm('确定屏蔽这个管理员吗?', '提示', {
          confirmButtonText: '屏蔽',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.reasonshow = true
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消屏蔽'
          })
        })
      } else if (val.btn === '修改分组') {
        this.groupshow = true
      } else if (val.btn === '修改密码') {
        this.passwordshow = true
      } else if (val.btn === '查看详情') {
        this.msgshow = true
      }
    },
    deleteanswer () {
      let that = this
      this.$g.ajax({
        path: 'admins/setenabled/' + this.getmsg.id + '/0',
        method: 'get',
        cbSuccess: function (data) {
          console.log(data.memo)
          that.$message({
            type: 'success',
            message: '屏蔽成功!'
          })
          that.reasonshow = false
          that.search()
        },
        cbError: function (data) {
          let msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    chgroup () {
      let that = this
      /* 管理员分组 */
      let gdata = [
        {//  验证password
          val: this.group,
          rules: {//  规则
            number: {
              msg: msgbox.get('numberMuse')
            }
          }
        }
      ]
      let resg = this.$g.verify.check(gdata)
      if (resg !== true) {
        this.$message.error('请选择管理组名')
        return false
      }
      this.$g.ajax({
        path: 'admins/setgroup/' + this.getmsg.id,
        method: 'post',
        data: {
          group_id: that.group
        },
        cbSuccess: function (data) {
          console.log(data.memo)
          that.$message({
            type: 'success',
            message: '修改分组成功!'
          })
          that.group = ''
          that.groupshow = false
          that.search()
        },
        cbError: function (data) {
          let msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    chpassword () {
      let that = this
      if (that.newpassword === '') {
        that.$message.error('请输入新密码')
      } else if (that.truepassword === '') {
        that.$message.error('请输入确认密码')
      } else if (that.newpassword !== that.truepassword) {
        that.$message.error('两次密码输入不一样')
      } else {
        let password = hash.md5hex(that.truepassword)
        this.$g.ajax({
          path: 'admins/setpassword/' + this.getmsg.id,
          method: 'post',
          data: {
            password: password
          },
          cbSuccess: function (data) {
            console.log(data.memo)
            that.$message({
              type: 'success',
              message: '修改密码成功!'
            })
            that.passwordshow = false
            that.search()
          },
          cbError: function (data) {
            let msg = msgbox.get(data.msg)
            that.$message.error(msg)
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  #administrators {
    .main-box{
      margin-top: 20px;
      span{
        margin-right: 30px;
        font-size: 14px;
        font-weight: 700;
        color: #606266;
      }
      .el-input {
        width: 240px;
      }
    }
    .main-box {
      .el-radio__inner {
        background: red;
      }
      .el-radio__input.is-checked+.el-radio__label{
        color: #00a4a0!important;
      }
    }
    .main-table{
      margin-top: 20px;
    }
    .add-title{
      text-align: center;
      font-size: 20px;
    }
    .active{
      display: inline-block;
      -moz-transform:rotate(180deg);
      -webkit-transform:rotate(180deg);
      -o-transform:rotate(180deg);
      -ms-transform:rotate(180deg);
      transform:rotate(180deg);
    }
    .layer {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 999;
      .mask {
        background: rgba(153, 153, 153, 0.5);
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 1;
      }
      .content {
        position: relative;
        width: 360px;
        background: #fff;
        margin: 10% auto;
        z-index: 2;
        padding: 30px;
        .close {
          position: absolute;
          right: 10px;
          top: 10px;
          cursor: pointer;
        }
        .title {
          text-align: center;
          font-size: 18px;
          font-weight: bold;
        }
        .doit .one .el-input {
          width: 200px;
          margin-left: 20px;
        }
        .doit .one {
          margin-top: 20px;
          font-size: 14px;
        }
        .doit {
          padding: 10px;
          font-size: 16px;
          p {
            line-height: 30px;
            color: #666;
            span {
              color: #333;
              margin-left: 15px;
            }
          }
        }
        .el-select  {
          position: relative;
          left: 16px;
          width: 200px;
        }
        .buttons {
          margin-top: 20px;
          text-align: center;
          button {
            margin: 0 20px;
          }
        }
      }
    }
  }
</style>
<style scoped>
  .el-button:focus, .el-button:hover{
    color: #00a4a0;
  }
  .el-button:active{
    border-color: #00a0a0;
  }
  .el-button{
    padding: 8px 14px;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background: #00a4a0;
    border-color: #00a4a0;
  }
  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
</style>
